<style>
    body {
        font-size: initial;
    }

    .layuiadmin-card-list p.layuiadmin-big-font {
        font-size: 36px;
        color: #666;
        line-height: 36px;
        padding: 5px 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: nowrap;
    }

    .tips {
        float: right;
        padding: 0 10px;
        margin-top: 10px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #3A91FB;
        border-radius: 30px;
        border: 1px #3A91FB solid;
        background: #eaf3ff;
    }

    .layui-card .data-all {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }

    layui-card .text-style {
        font-size: 16px;
    }

    .red {
        color: red;
    }
</style>
<div class="" style="margin-bottom: 100px;margin-top: 10px">
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="header-font">运营数据</span>
            <span class="header-time">更新时间：<?=date('Y-m-d H:i:s')?></span>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-header">
                    成交订单（笔）
                    <span class="tips">今日</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font"><?= $order_num['day'] ?></p>
                    <p>昨日：<span class="text-style"><?= $order_num['yester'] ?></span>
                        &nbsp;&nbsp;
                        <span class="red"><?= $order_num['diff'] ?></span>
                    </p>
                    <div class="data-all">累计成交订单
                        <div class="text-style"><?= $order_num['total'] ?></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-sm6 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    营业额（元）
                    <span class="tips">今日</span>
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <p class="layuiadmin-big-font"><?= $order_amount['day'] ?></p>
                    <p>昨日：<span class="text-style"><?= $order_amount['yester'] ?></span>
                        &nbsp;&nbsp;
                        <span class="red"><?= $order_amount['diff'] ?></span>
                    </p>
                    <div class="data-all">累计营业额
                        <div class="text-style"><?= $order_amount['total'] ?></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 销冠商品 -->
        <div class="layui-col-sm6 ">
            <div class="layui-card">
                <div class="layui-card-header">
                    销冠商品（前5名）
                </div>
                <div class="layui-card-body layuiadmin-card-list">
                    <div class="layui-tab-content" style="padding: 0 15px;">

                        <table id="goods-lists" lay-filter="goods-lists"></table>
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                            <tr>
                                <th>排名</th>
                                <th>商品</th>
                                <th>金额</th>
                            </tr>
                            </thead>
                            <tbody>
                            <?php foreach ($ranking as $key => $item): ?>
                                <tr>
                                    <td><?= $key + 1 ?></td>
                                    <td><?= $item['name'] ?></td>
                                    <td><?= $item['total_pay_price'] ?></td>
                                </tr>
                            <?php endforeach; ?>
                            </tbody>
                        </table>
                        <?php if (empty($ranking)): ?>
                            <div class="layui-none" style="text-align: center">暂无相关数据</div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>

        <!--表格-->
        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        近15天营业额（元）
                        <div class="layadmin-dataview">
                            <div id="sale-charts" style="width: 100%; height: 400px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-col-sm12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-row">
                        近15天注册人数（人）
                        <div class="layadmin-dataview">
                            <div id="user-charts" style="width: 100%; height: 400px">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="/public/static/admin/echarts.common.js"></script>
<?php $this->beginBlock('script'); ?>
<script>
    //15天营业额
    $.operate.b5get('<?=\yii\helpers\Url::toRoute('common/get-turnover')?>',{},turnover);
    function turnover(result) {
        var data = result.data;
        var option = {
            xAxis: {
                type: 'category',
                data: data.xAxis
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.series,
                    type: 'line',
                    smooth: true
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('sale-charts'));
        myChart.setOption(option);
    }
    //15天进店人数
    $.operate.b5get('<?=\yii\helpers\Url::toRoute('common/get-enter')?>',{},enter);
    function enter(result) {
        var data = result.data;
        var option = {
            xAxis: {
                type: 'category',
                data: data.xAxis
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.series,
                    type: 'line',
                    smooth: true
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('user-charts'));
        myChart.setOption(option);
    }
</script>
<?php $this->endBlock(); ?>